<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程跟踪图</title>
    <script type="text/javascript" src="static/workflow/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/workflow/js/underscore.min.js"></script>
    <!-- vue3，element-plus引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.6/dist/index.css">
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus@2.3.6/dist/index.full.js"></script>
    <!--流程跟踪图引入的JS-->
    <script type="text/javascript" src="static/workflow/bpm/WorkflowDesigner/js/StatusUi.js"></script>
    <link href="static/workflow/bpm/WorkflowDesigner/css/common.css" media="screen" rel="stylesheet" type="text/css"/>
    <link href="static/workflow/bpm/WorkflowDesigner/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="EWPIVUE">
        <!-- 人工节点执行信息 -->
        <div id="EWPI03">
            <el-dialog v-model="manualDialog" width="1000" title="任务列表" draggable>
                <el-table :data="manualList" border style="width: 100%">
                    <el-table-column prop="completer" label="执行人" align="center"></el-table-column>
                    <el-table-column prop="taskStatus" label="状态" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.taskStatus == 'open'">活动</div>
                            <div v-if="scope.row.taskStatus == 'completed'">已完成</div>
                            <div v-if="scope.row.taskStatus == 'suspend'">已挂起</div>
                            <div v-if="scope.row.taskStatus == 'closed'">已关闭</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="claimStatus" label="领取状态" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.claimStatus == 'false'">未领取</div>
                            <div v-if="scope.row.claimStatus == 'true'">已领取</div>
                            <div v-if="scope.row.claimStatus == 'claimed'">被领取</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="hasAuth" label="授权状态" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.hasAuth == 'false'">未授权</div>
                            <div v-if="scope.row.hasAuth == 'true'">已授权</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startTime" label="开始时间" align="center" width="180">
                        <template #default="scope">
                            {{dateFormat(scope.row.startTime)}}
                        </template>
                    </el-table-column>
                    </el-table-column>
                    <el-table-column prop="endTime" label="完成时间" align="center" width="180">
                        <template #default="scope">
                            {{dateFormat(scope.row.endTime)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="duration" label="持续时间" align="center"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!-- 活动节点弹框 -->
        <div id="EWPI05">
            <el-dialog v-model="serviceDialog" width="1000" title="记录集" draggable>
                <el-table :data="manualList" border style="width: 100%">
                    <el-table-column prop="processInstanceId" label="流程实例ID" align="center"></el-table-column>
                    <el-table-column prop="processKey" label="流程编码" align="center"></el-table-column>
                    <el-table-column prop="processName" label="流程名称" align="center"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center">
                        <template #default="scope">
                            <div v-if="scope.row.state == 'succeed'">成功</div>
                            <div v-if="scope.row.state == 'failed'">失败</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="recCreateTime" label="创建时间" align="center" width="180">
                        <template #default="scope">
                            {{dateFormat(scope.row.recCreateTime)}}
                        </template>
                    </el-table-column>
                    </el-table-column>
                    <el-table-column prop="recCreator" label="创建人" align="center"></el-table-column>
                    <el-table-column prop="failureReason" label="异常信息" align="center"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
    
    <div id = "graphContainerPanel" title="流程跟踪图" style="overflow:auto;height:100vh;">
        <!--流程跟踪图展示区域-->
        <div id="graphContainer"	style="position:relative;overflow:auto;width:100%;height:100%;">
        </div>
    </div>
    <!-- <br/>
    <div id="manual" title="人工节点执行信息" style="overflow:auto;height:500px;">
        <b id="manualTip" style="padding-left: 5px;font-weight: bold;font-size: 15px">节点执行信息</b>
        <table id="manualTable" class="table">
            <thead>
            <tr>
            <th width="20%">执行人</th>
            <th width="20%">状态</th>
            <th width="20%">开始时间</th>
            <th width="20%">结束时间</th>
            <th width="20%">持续时间</th>
            </tr>
            </thead>
            <tbody id="manualTableBody">

            </tbody>
        </table>
    </div> -->
</body>
<script type="text/javascript">
    function getProcessInstaceId() {
        var url = window.location.href; //获取url中"?"符后的字串
        var processInstanceId = "";
        if (url.indexOf('?') != -1) {
            url = url.split("?")[1];
        }
        if (url) {
            var strs = url.split('&');
            for (var i = 0; i < strs.length; i++) {
                var srtArry = strs[i].split('=');
                if(srtArry[0] == 'processInstanceId'){
                    processInstanceId = srtArry[1];
                    break;
                }
            }
        }
        return processInstanceId;
    }

    $(function () {
        var eu = new EditorUi(new Editor(),$('#graphContainer')[0]);

        var processInstanceId = getProcessInstaceId();
        if(processInstanceId == ""){
            return;
        }
        eu.showTraceGraph(processInstanceId);
    });

    const app = Vue.createApp({
        data() {
            return {
                manualDialog: false,
                manualList: [],
                serviceDialog: false,
                serviceList: [],
            };
        },
        methods: {
            showDialog(data) {
                this.manualList = data;
                this.manualDialog = true;
            },
            showDialogService(data) {
                this.serviceList = data;
                this.serviceDialog = true;
            },
            dateFormat(e) {
                // const date = new Date(e);
                if (e>0){
                    const date = new Date(e.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6'));            const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    const hour = String(date.getHours()).padStart(2, '0');
                    const minute = String(date.getMinutes()).padStart(2, '0');
                    const second = String(date.getSeconds()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
                } else {
                    return '';
                }
            },
            showMessage(message, type = 'warning') {
                ElMessage({
                    message: message,
                    type: 'warning',
                })
                // this.$message({
                //     message,
                //     type
                // });
            }
        }
        });
    app.use(ElementPlus);
    window.myVueInstance = app.mount('#EWPIVUE');
</script>
</html>